<div th:fragment="html">
    <div id="castSurelyDiv">
        <table class="inputTable ">
            <tr>
                <td align="right">
                    <span data-toggle="tooltip" data-placement="top" title="小于或等于0时，不做卖出操作，将一直持有！">
                        收益率（%） :
                    </span>
                </td>
                <td>
                    <input type="text" class="form-control" @change="queryCastSurely" v-model="castSurelyMap.profitRate">
                </td>
                <td align="right">
                    <span data-toggle="tooltip" data-placement="top">
                        定投周期（天） :
                    </span>
                </td>
                <td>
                    <input type="text" class="form-control" @change="queryCastSurely" v-model="castSurelyMap.cycle">
                </td>
            </tr>
        </table>
        
        <br>
        <div style="text-align:center;">
            <button type="button" class="btn btn-success" @click="queryCastSurely">查询</button>
        </div>
        <br>

        <table class="table table-bordered table-condensed">
            <thead>
            <th align="center" colspan="2">定投盈亏统计（每期定投100元）</th>
            </thead>
            <tbody>
            <tr>
                <td width="50%">总共买入次数</td>
                <td>{{regular.number}}</td>
            </tr>
            <tr>
                <td>拥有总份额</td>
                <td>{{regular.shareSum}}</td>
            </tr>
            <tr>
                <td>平均净值</td>
                <td v-if="regular.shareSum==0">0</td>
                <td v-else>{{regular.number*castSurelyMap.money/regular.shareSum | formatNumberFilter(4)}}</td>
            </tr>
            <tr>
                <td>市值</td>
                <td>{{regular.nowDwjz}}</td>
            </tr>
            <tr>
                <td>定投总金额</td>
                <td>{{regular.number*100}}</td>
            </tr>
            <tr>
                <td>卖出日期</td>
                <td>{{regular.sellDate}}</td>
            </tr>
            <tr>
                <td>收益</td>
                <td>{{regular.profit | formatNumberFilter(2)}}</td>
            </tr>
            <tr>
                <td>收益率</td>
                <td v-if="regular.number==0">0</td>
                <td v-else>{{regular.profit/regular.number/castSurelyMap.money*100 | formatNumberFilter(2)}}%</td>
            </tr>
            </tbody>
        </table>
    </div>

    <script>
        $(function () {
            var castSurelyVue = {
                castSurelyMap:{fundData:{id:'',code:''},startDate:'',endDate:'',profitRate:'5',cycle:'7',money:100},
                regular:{},
            };
            var vue = new Vue({
                el: '#castSurelyDiv',
                data: castSurelyVue,
                mounted: function () {

                },
                methods: {
                    getCastSurely:function(){
                        vue.castSurelyMap.fundData.id=$("#simSmfdId").val();
                        vue.castSurelyMap.fundData.code=$("#simSmfdCode").val();
                        vue.castSurelyMap.startDate=$("#simSmsd").val();
                        vue.castSurelyMap.endDate=$("#simSmed").val();
                    },
                    queryCastSurely:function(){
                        vue.getCastSurely();
                        var url =  "/funddatas/castSurely";
                        axios.post(url,vue.castSurelyMap).then(function(response) {
                            var result=response.data;
                            if(result.code==0){
                                vue.regular=result.castSurely;
                            }else {
                                alert(result.msg);
                            }
                        });
                    },
                }
            });
        });
    </script>
</div>
